1. 安装Ember.js

1
npm install -g ember-cli@3.0

2. 构建应用，并启动服务

1
2
3
4
# 构建应用
ember new ember-quickstart  //如果失败，在执行一遍试试
# 启动服务
ember server 或者 ember s  //打开浏览器，ip + :4200

3. 使用ember cli创建一些对应文件

1
2
ember generate route scientists
# 会生成对应的文件，routes目录下，templates目录下，还会在routes.js文件里自动注册路由-->this.route('scientists');


1
2
ember g component people-list
# 会生成对应的文件，componments目录下，templates/componments目录下；

4. application.hbs

1
2
3
4
# 说明
这个文件是最开始自动生成的文件，在这里面写的代码，无论浏览器路径是多少，它都会在页面上显示，另外它有一个{{outlet}}，用来嵌入别的页面。
# 疑惑
还没有搞懂什么时候{{outlet}}会嵌套别的页面。。。

5. 需求：遍历一些数据，并增添点击事件

5.1.

1
2
3
4
5
6
7
8
# 目录：
/app/routes/scientists.js
# 代码
export default Route.extend({
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
});

5.2.

1
2
3
4
5
6
7
8
9
10
# 目录：
/app/templats/scientists.hbs
# 代码
<h2>List of Scientists</h2>
<ul>
  {{#each model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>
# 这时候数据就在页面上展示出来了，ip:4200/scientists

5.3.

1
2
3
4
5
6
7
8
9
10
11
12
# 还有一种灵动的写法
/app/templats/components/people-list.hbs
# 代码，将变量用花括号包括起来；
<h2>{{title}}</h2>
<ul>
  {{#each people as |person|}}
    <li>{{person}}</li>
  {{/each}}
</ul>
# 将people-list.hbs的内容放在scientists.hbs里面展示
# 代码添加到scientists.hbs末尾：
{{people-list title="List of Scientists111" people=model}}

5.4 action ：执行点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# js目录：
/app/components/people-list.js
# 代码：
export default Component.extend({
  actions:{
    showPerson:function(person){
      alert(person);
    }
  }
});
# hbs目录
/app/templats/components/people-list.hbs
# 代码添加，其中方法民后面的person，是参数
<button {{action "showPerson" person}}>{{person}}</button>

1
2
3
4
5
在.hbs文件中，加入
{{#link-to "about" class="button"}}
    About Us
{{/link-to}}
# 其中 "about"是路由名，About Us是链接名，class是样式。

7. Index Route

1
2
3
4
5
6
7
8
# 背景+需求
现在我们已经创建了一个路由 rentals；准备添加一个索引路由，它将处理/对我们网站根URI（）的请求。希望将rentals对应的页面作为应用程序的主页面。
# index路由的特殊性
index路由是特殊的：它不需要路由器映射中的条目。
# 需求：当用户访问根（/）URL过渡到时，我们想要做的所有事情/rentals。
为此，我们将通过实现一个名为route lifecycle hook的代码将代码添加到我们的索引路由处理程序中beforeModel。
每个路由处理程序都有一组“生命周期挂钩”，它们是在加载页面期间的特定时间调用的函数。在beforeModel 之前的数据被从模型中取出钩子钩被执行，并且呈现页面之前。
在我们的索引路由处理程序中，我们将调用该replaceWith函数。该replaceWith功能类似于路由的transitionTo()功能，不同之处在于它replaceWith会替换浏览器历史记录中的当前网址，同时transitionTo会添加到历史记录中。由于我们希望我们的rentals路线作为我们的主页，我们将使用该replaceWith功能。
1
2
3
4
5
6
7
8
# 目录
app/routes/index.js
# 代码：
export default Route.extend({
  beforeModel(){
    this.replaceWith("rentals");
  }
});

8. if的使用

1
2
3
# 说明
{{if isWide "wide"}}
如果iswide属性 是true ,则显示wide,为false,则隐藏wide字段。

9. 鼠标事件

1
2
3
4
5
6
7
8
9
mouseEnter:function(){
    ...
}
mouseLeave:function(){
    ...
}
mouseMove:function(){
    ...
}